<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css"/>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>数据综合展示</title>
    <style>
        <%--百度地图取消显示logo--%>
        .BMap_cpyCtrl {display: none;}
        .anchorBL {display: none;}

        .data-table{
          padding-left:15px;
        }
        .line-contatin{
            width:100%;
            height:100%;
        }
        .num-contatin{
            box-shadow: 0 0px 0px 0 rgba(0,0,0,.05);
        }
    </style>
</head>

<body>
<div id="saper-container">
    <div id="saper-hd"></div>
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>数据综合展示</h2>
        </div>
        <div class="subfiled-content" >
            <div class="container layui-row">
                <div class="layui-row-sm12 layui-row-md12 layui-row-lg12 data-num">
                    <%--年上报--%>
                    <div class="layui-col-sm4 layui-col-md4 layui-col-lg4 data-num">
                        <div class="layui-card num-contatin">
                            <div class="layui-card-body">
                                <div class="layui-card contain-year">
                                    <div class="layui-card-header">年上报数</div>
                                    <div class="layui-card-body">
                                        <div class="layui-row number year-body">
                                            <div class="body-finish layui-col-sm4 layui-col-md4">
                                                <p>处理完成</p>
                                                <p id="count-number1">1212</p>
                                            </div>
                                            <div class="body-wdeal layui-col-sm4 layui-col-md4">
                                                <p>待处理</p>
                                                <p  id="count-number2">1212</p>
                                            </div>
                                            <div class="body-ndeal layui-col-sm4 layui-col-md4">
                                                <p>未处理</p>
                                                <p  id="count-number3">1212</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card contain-month">
                                    <div class="layui-card-header">月上报数</div>
                                    <div class="layui-card-body">
                                        <div class="layui-row number month-body">
                                            <div class="body-finish layui-col-sm4 layui-col-md4">
                                                <p>处理完成</p>
                                                <p  id="count-number4">1212</p>
                                            </div>
                                            <div class="body-wdeal layui-col-sm4 layui-col-md4">
                                                <p>待处理</p>
                                                <p  id="count-number5">1212</p>
                                            </div>
                                            <div class="body-ndeal layui-col-sm4 layui-col-md4">
                                                <p>未处理</p>
                                                <p  id="count-number6">1212</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card contain-day">
                                    <div class="layui-card-header">日上报数</div>
                                    <div class="layui-card-body">
                                        <div class="layui-row number day-body">
                                            <div class="body-finish layui-col-sm4 layui-col-md4">
                                                <p>处理完成</p>
                                                <p  id="count-number7">1212</p>
                                            </div>
                                            <div class="body-wdeal layui-col-sm4 layui-col-md4">
                                                <p>待处理</p>
                                                <p  id="count-number8">1212</p>
                                            </div>
                                            <div class="body-ndeal layui-col-sm4 layui-col-md4">
                                                <p>未处理</p>
                                                <p  id="count-number9">1212</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                        <%--表格--%>
                        <div class="layui-col-sm8 layui-col-md8 layui-col-lg8 data-num">
                            <table class="layui-hide" id="data"></table>
                        </div>
                </div>

                <%--<div class="map layui-col-sm4 layui-col-md4 layui-col-lg4 " id="map" style="height:400px;"></div>--%>
                <div class="layui-row-sm6 layui-row-md6 layui-row-lg6 data-table">
                    <div class="layui-col-sm4 layui-col-md4 layui-col-lg4">
                    <%--综合上报--%>
                        <div class="layui-card line-contatin" id="month_line" style="height:400px;"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md4 layui-col-lg4">
                        <%--地图--%>
                        <div class="map" id="map" style="height:400px;"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md4 layui-col-lg4">
                        <%--区域--%>
                        <div id="area-bar" style="width:100%;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>
</body>
<script type="text/javascript" src="/static/webjars/layui/layui.js"></script>
<script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
<script type="text/javascript" src="/static/base/common/js/sapar.js"></script>
<script type="text/javascript" src="/static/js/special/countUp.min.js"></script>
<script type="text/javascript" src="/static/webjars/echarts/echarts.js"></script>
<script type="text/javascript" src="/static/js/special/bmap.min.js"></script>
<script type="text/javascript">

    function map() {
        var myChart = echarts.init(document.getElementById('map'));
        $.get('/static/js/special/json/hangzhou-tracks.json', function (data) {

            var points = [].concat.apply([], data.map(function (track) {
                return track.map(function (seg) {
                    return seg.coord.concat([1]);
                });
            }));
            myChart.setOption(option = {
                animation: false,
                bmap: {
                    center: [105.245851,28.310923],
                    zoom: 11,
                    roam: true
                },
                visualMap: {
                    show: false,
                    top: 'top',
                    min: 0,
                    max: 5,
                    seriesIndex: 0,
                    calculable: true,
                    inRange: {
                        color: ['blue', 'blue', 'green', 'yellow', 'red']
                    }
                },
                toolbox: {//工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
                    feature: {//各工具配置项。
                        dataView: {//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                            show: true,//是否显示组件。
                            readOnly: false
                        },
                        magicType:{//动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
                            show:true,
                            type:['line','bar']
                        },
                        restore: {//配置项还原。
                            show: true
                        },
                        saveAsImage: {//保存为图片。
                            show: true
                        }
                    }
                },
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'bmap',
                    data:points,
                    pointSize: 5,
                    blurSize: 6
                }]
            });


            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());


            var ecModel = myChart._model;
            var map = null;
            ecModel.eachComponent('bmap', function (bmapModel) {
                if(map == null){
                    map = bmapModel.__bmap;
                }
            });
            map.enableScrollWheelZoom(true);

            //设置放大缩小的动画效果

        });
    }


    /*数字刷新*/
    function countNumer(){
        var options = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            decimal: '.',
        };
        var options1 = {
            useEasing: true,
            useGrouping: true,
            separator: ',',
            suffix:''
        };
        count_number1 = new CountUp('count-number1', 0, 0, 0, 1.5, options);
        count_number2 = new CountUp('count-number2', 0, 0, 0, 1.5, options);
        count_number3 = new CountUp('count-number3', 0, 0, 0, 1.5, options);
        count_number4 = new CountUp('count-number4', 0, 0, 0, 1.5, options);

        count_number5 = new CountUp('count-number5', 0, 0, 0, 1.5, options1);
        count_number6 = new CountUp('count-number6', 0, 0, 0, 1.5, options1);
        count_number7 = new CountUp('count-number7', 0, 0, 0, 1.5, options1);
        count_number8 = new CountUp('count-number8', 0, 0, 0, 1.5, options1);
        count_number9 = new CountUp('count-number8', 0, 0, 0, 1.5, options1);

        count_number1.start();
        count_number2.start();
        count_number3.start();
        count_number4.start();
        count_number5.start();
        count_number6.start();
        count_number7.start();
        count_number8.start();
        count_number9.start();

    }

    map();
    countNumer();
    /*初始化dom*/
    var mychart2 =echarts.init(document.getElementById('area-bar'));
    var mychart1 =echarts.init(document.getElementById('month_line'));


    //简单表格
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#data'
            ,url:'/ajax/commandajax/data_show_table'
            ,height:400
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                { title: 'ID',templet:function(d){
            return d.ctReport.reportId;
                 }}
                ,{ title: '用户名',sort:true,templet:function(d){
                    if(d.reportName == null){
                        return "未知用户";
                    }else{
                        return d.reportName;
                    }

                }}
                ,{field:'reportName', title: '上报事件', sort: true,templet:function(d){
                             return d.ctReport.title;
                }}
                ,{field:'townName', title: '城市',sort:true}
                ,{field:'createTimeName',title:'上报时间',sort:true}
            ]]
        });
    });

    var monthData=[];       //每年数据
    var dataAxis = [];
    var data = [];
    var yMax = 500;
    var dataShadow = [];
    var year = [];

    for (var i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }

    $.getJSON('/ajax/commandajax/data_show',function(value){
       value.towns.forEach(function(item){
           dataAxis.push(item.townName);
       });

       //数据刷新
        count_number1.update(value.year_report_over);
        count_number2.update(value.year_report_accept);
        count_number3.update(value.year_report_default);
        count_number4.update(value.month_report_over);
        count_number5.update(value.month_report_accept);
        count_number6.update(value.month_report_default);
        count_number7.update(value.day_report_over);
        count_number8.update(value.day_report_accept);
        count_number9.update(value.day_report_default);

       year = value.year;

        //某一年的每月
       year.forEach(function(item){
           var month = [0,0,0,0,0,0,0,0,0,0,0,0];
           value.month[item].forEach(function(d){
               month[d[0]-1] = d[1];
           });
           monthData.push({
               series: [{
                   data: month,
                   type: 'line',
                   smooth:false,
                   lineStyle:{
                       color:'#00b0ff'
                   },
                   areaStyle: {
                       normal: {
                           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                               offset: 0,
                               color: '#2378f7'
                           }, {
                               offset: 1,
                               color: '#fff'
                           }])
                       }
                   },
               }]
           });
       });

       //某一年的每个地区
        year.forEach(function(item){
            var area=[];
            dataAxis.forEach(function(d){
                area.push(value.townYear[item][d]);
            });
            data.push({
                series: [
                    { // For shadow
                        type: 'bar',
                        itemStyle: {
                            normal: {color: 'rgba(0,0,0,0.05)'}
                        },
                        barGap:'-100%',
                        barCategoryGap:'40%',
                        data: dataShadow,
                        animation: false
                    },
                    {
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#188df0'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#eee'}
                                    ]
                                )
                            },
                            emphasis: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#2378f7'},
                                        {offset: 0.7, color: '#2378f7'},
                                        {offset: 1, color: '#eee'}
                                    ]
                                )
                            }
                        },
                        data: area
                    }
                ]
            })

        });

        var option1 = {
            baseOption:{
                timeline: {
                    axisType: 'category',
                    orient: 'vertical',
                    autoPlay: true,
                    inverse: true,
                    playInterval: 1000,
                    left: null,
                    right: 10,
                    top: 20,
                    bottom: 20,
                    width: 42,
                    height: null,
                    label: {
                        show:true,

                        normal: {
                            position:'right',
                            textStyle: {
                                color: '#000'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#188df0'
                            }
                        }
                    },
                    symbol: 'none',
                    lineStyle: {
                        color: '#ddd'
                    },
                    checkpointStyle: {
                        color: '#fff',
                        borderColor: '#188df0',
                        borderWidth: 2
                    },
                    controlStyle: {
                        showNextBtn: false,
                        showPrevBtn: false,
                        normal: {
                            color: '#188df0',
                            borderColor: '#188df0'
                        },
                        emphasis: {
                            color: '#aaa',
                            borderColor: '#aaa'
                        }
                    },
                    data: year
                },
                title:{
                    text:'综合上报信息',
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer:{
                        type:'line',
                        lineStyle:{
                            width:20,
                            opacity:0.5
                        }
                    },
                },
                grid:{
                  right:80
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'],
                    axisLabel:{
                        show:true,
                        formatter: function(value) {
                            var ret = ""; //拼接加\n返回的类目项
                            var maxLength = 1; //每项显示文字个数
                            var valLength = value.length; //X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                            if (rowN > 1&&rowN<=3) //如果类目项的文字大于3,
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = ""; //每次截取的字符串
                                    var start = i * maxLength; //开始截取的位置
                                    var end = start + maxLength; //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            } else if(rowN>3){
                                for (var i = 0; i < 4; i++) {
                                    var temp = ""; //每次截取的字符串
                                    var start = i * maxLength; //开始截取的位置
                                    var end = start + maxLength; //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            }else{
                                return value;
                            }
                        },
                    }

                },
                yAxis: {
                    type: 'value',
                    name:'上报数/(件)'
                }
            },
            options:monthData

        };
        var option2 = {
            baseOption:{
                timeline: {
                    axisType: 'category',
                    orient: 'vertical',
                    autoPlay: true,
                    inverse: true,
                    playInterval: 1000,
                    left: null,
                    right: 10,
                    top: 20,
                    bottom: 20,
                    width: 42,
                    height: null,
                    label: {
                        show:true,

                        normal: {
                            position:'right',
                            textStyle: {
                                color: '#000'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#188df0'
                            }
                        }
                    },
                    symbol: 'none',
                    lineStyle: {
                        color: '#ddd'
                    },
                    checkpointStyle: {
                        color: '#fff',
                        borderColor: '#188df0',
                        borderWidth: 2
                    },
                    controlStyle: {
                        showNextBtn: false,
                        showPrevBtn: false,
                        normal: {
                            color: '#188df0',
                            borderColor: '#188df0'
                        },
                        emphasis: {
                            color: '#aaa',
                            borderColor: '#aaa'
                        }
                    },
                    data: year
                },
                title: {
                    text: '区域上报信息',
                },
                grid:{
                    right:60
                },
                xAxis: {
                    show:true,
                    data: dataAxis,
                    axisLabel: {
                        show:true,
                        formatter: function(value) {
                            var ret = ""; //拼接加\n返回的类目项
                            var maxLength = 1; //每项显示文字个数
                            var valLength = value.length; //X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                            if (rowN > 1&&rowN<=3) //如果类目项的文字大于3,
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = ""; //每次截取的字符串
                                    var start = i * maxLength; //开始截取的位置
                                    var end = start + maxLength; //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            } else if(rowN>3){
                                for (var i = 0; i < 4; i++) {
                                    var temp = ""; //每次截取的字符串
                                    var start = i * maxLength; //开始截取的位置
                                    var end = start + maxLength; //结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            }else{
                                return value;
                            }
                        },
                        textStyle: {
                            color: '#222'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    z:10,
                },
                yAxis: {
                    name:'上报数/(件)',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#999'
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],
            },
            options:data
        };

        mychart1.setOption(option1);
        mychart2.setOption(option2);


        //展示最高的数据
        showHigh({"mychart":mychart1,"timer":1});

    });










    // Enable data zoom when user click bar.
    var zoomSize = 6;
    mychart2.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        mychart2.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });




    //自动获取最大数值并展示
    function showHigh(obj) {
        var mychart = obj.mychart;
        var arr = mychart.getOption().series[0].data;

        var num = eval(arr);
        mychart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: num.tip});

        var zRender = mychart.getZr();
        //mousemove和mouseout总是成对出现，而且out先出现。。。。所以没法解决鼠标hover时暂停自动tip的效果
        zRender.on('mousemove', function (param) {
            console.log('move');
            if (obj.timer) {

                clearTimeout(obj.timer);
                obj.timer = 0;
            }
        });
        zRender.on('mouseout', function (param) {
            console.log('OUT');
            if (param.event) {
                //判断坐标是否在图表上，然后在处理应该可以实现
                if (!obj.timer) {
                    obj.timer = setTimeout(function () {
                        mychart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: num.tip});
                    }, 0);

                }
            }
        });
    }

    function eval(arr) {
        var max=0;
        var tip=0;
        arr.forEach(function (item,i) {
           if(Number(item) > max ){
               max=item;
               tip = i;
           }
        });
        return {"max":max,"tip":tip};
    }

</script>

</html>